<script setup>
import _ from 'lodash'
import {isTypeEle} from '../../../utils/mutil';
import {DFT_ICONS} from "@jzl/icons";

const DFTS = {
  opacity: 100,
  blur: 0,
  brightness: 10,
  contrast: 10,
  invert: 0,
  saturate: 10,
  grayscale: 0,
  sepia: 0
}
const istyle = defineModel()
const props = defineProps({
  // istyle: Object,
  eleDef: Object
})

const isSet = (prop) => {
  return _.has(istyle.value, prop) && istyle.value[prop] >= 0;
}

const resetDft = (prop) => {
  istyle.value[prop] = DFTS[prop];
}

const switchVal = (prop) => {
  let val = istyle.value[prop];
  let nVal = -1;
  if ((!_.isNumber(val) || val < 0)) {
    nVal = DFTS[prop];
  } else {
    nVal = -1;
  }

  // this.$set(this.istyle, prop, nVal);
  istyle.value[prop] = nVal;
}
</script>
<template>
  <div class="ele-prop-item">
    <el-form
      label-width="60px"
      size="mini"
      label-position="top"
      v-if="istyle">
      <el-form-item label="图片" v-if="isTypeEle(eleDef, 'image') || isTypeEle(eleDef, 'img')">
        <FilePicker v-model="istyle.image" accept-type="3" v-bind="$attrs"/>
      </el-form-item>
      <el-form-item label="图片模式（仅图片元素设置有效）">
        <el-radio-group v-if="istyle" v-model="istyle.objectFit">
          <el-radio-button label="fill" v-tippy="{ arrow: true }" content="拉伸 fill">
            <JIcon :icon="DFT_ICONS.widthFull"/>
          </el-radio-button>
          <el-radio-button label="cover" v-tippy="{ arrow: true }" content="覆盖 cover">
            <JIcon :icon="DFT_ICONS.cover"/>
          </el-radio-button>
          <el-radio-button label="contain" v-tippy="{ arrow: true }" content="包含 contain">
            <JIcon :icon="DFT_ICONS.contain"/>
          </el-radio-button>
          <el-radio-button label="none" v-tippy="{ arrow: true }" content="清空 none">
            <JIcon :icon="DFT_ICONS.none"/>
          </el-radio-button>
          <el-radio-button label="inherit" v-tippy="{ arrow: true }" content="继承 inherit">
            <JIcon :icon="DFT_ICONS.initialize"/>
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <div class="text-center text-gray-500 mt-10 font-bold" style="font-size: 13px;">滤镜</div>
      <el-form-item label="不透明度">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('opacity')">
              <JIcon :icon="isSet('opacity') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              不透明度
            </div>
            <span @click="resetDft('opacity')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.opacity >= 0"
          v-model="istyle.opacity"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="small"
        />
      </el-form-item>
      <el-form-item label="模糊">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('blur')">
              <JIcon :icon="isSet('blur') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              模糊
            </div>
            <span @click="resetDft('blur')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.blur >= 0"
          v-model="istyle.blur"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="亮度">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('brightness')">
              <JIcon :icon="isSet('brightness') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              亮度
            </div>
            <span @click="resetDft('brightness')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.brightness >= 0"
          v-model="istyle.brightness"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="对比度">
        <template #label>
          <div slot="label" class="title-label">
            <div class="title-switch" @click="switchVal('contrast')">
              <JIcon :icon="isSet('contrast') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              对比度
            </div>
            <span @click="resetDft('contrast')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.contrast >= 0"
          v-model="istyle.contrast"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="反转">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('invert')">
              <JIcon :icon="isSet('invert') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              反转
            </div>
            <span @click="resetDft('invert')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.invert >= 0"
          v-model="istyle.invert"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="饱和度">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('saturate')">
              <JIcon :icon="isSet('saturate') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              饱和度
            </div>
            <span @click="resetDft('saturate')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.saturate >= 0"
          v-model="istyle.saturate"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="灰度">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('grayscale')">
              <JIcon :icon="isSet('grayscale') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              灰度
            </div>
            <span @click="resetDft('grayscale')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.grayscale >= 0"
          v-model="istyle.grayscale"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
      <el-form-item label="褐色度">
        <template #label>
          <div class="title-label">
            <div class="title-switch" @click="switchVal('sepia')">
              <JIcon :icon="isSet('sepia') ? DFT_ICONS.checkRect: DFT_ICONS.checkRectEmpty"/>
              褐色度
            </div>
            <span @click="resetDft('sepia')" class="title-btn">默认值</span>
          </div>
        </template>
        <el-slider
          v-if="istyle.sepia >= 0"
          v-model="istyle.sepia"
          class="pl-4 pr-3"
          :min="-1"
          :max="100"
          :step="1"
          input-size="mini"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.title-label {
  display: flex;
  justify-content: space-between;
  color: #666;

  .title-switch {
    display: flex;
    align-items: center;
    cursor: pointer;

    > i {
      margin-right: 5px;
      background: #FFF;
      color: #333;
    }
  }

  .title-btn {
    cursor: pointer;
  }
}
</style>
